<template>
  <div id="#App">
    <transition :name="slideOrietation">
      <router-view></router-view>
    </transition>
    <navbar></navbar>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  name: 'App',
  components: {
    Navbar,
  },
  data(){
    return {
      slideOrietation: 'slideUp',
    }
  },
  watch:{
    $route(to, from){
      if(to.meta.index > from.meta.index){
        this.slideOrietation = 'slideUp'
      }
      else{
        this.slideOrietation = 'slideDown'
      }
    }
  },
  mounted() {
    const app = this
    /*保证页面刷新时导航栏也能保持在正确位置*/
    window.addEventListener('pageshow', function(){
      if(app.$route.meta.index > 0){
        app.$bus.$emit('flowDown')
      }
    })
  }
}
</script>

<style>
@font-face {
  font-family: "XiMaiTi";
  src: url('assets/ZiZhiQuXiMaiTi.ttf');
}

*{
  /*取消默认边距*/
  margin: 0;
  padding: 0;
  /*重定义尺寸形式*/
  box-sizing: border-box;
}

html{
  /*滚动条设置*/
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
  /*定义色卡*/
  --pink: #ff595e;
  --yellow: #ffca3a;
  --green: #8ac926;
  --blue: #1982c4;
  --purple: #6a4c93;
  --dark: #737990;
  --pale: rgb(250, 250, 250);
  /*定义安全区*/
  --safe-area-inset-bottom: 0px;
  @supports (bottom: env(safe-area-inset-bottom)){
    --safe-area-inset-bottom: env(safe-area-inset-bottom);        
  }
}

body{
  background: var(--pale);
}

h2{
  width: fit-content;
  font-size: 3rem;
  font-family: XiMaiTi;
  transform-origin: 0 0;
  transform: scaleX(120%);
  margin: 1rem 5%;
  color: var(--pink);
  text-shadow: 4px 0px 0px var(--yellow);

}

p{
  line-height: 2;
}

.note{
  color: grey;
  font-size: 0.75rem;
}

.container{
  width: 100vw;
  padding-bottom: calc(5rem + var(--safe-area-inset-bottom));
  background: var(--pale);
  position: absolute;
}

.float-menu{
  width: 240px;
  animation: menu-change 2s ease-out;
}

.main-content{
  width: calc(100% - 240px);
  margin-left: 240px;
  animation: main-content-cover 2s ease-out;
}

.section{
  width: 100%;
}

.slideUp-enter, .slideDown-leave-to{
  transform: translateY(100%);
}

.slideUp-leave-to, .slideDown-enter{
  transform: translateY(-100%);
}

.slideUp-enter-active, .slideUp-leave-active, .slideDown-enter-active, .slideDown-leave-active{
  transition: all 2s;
}

@keyframes shiftShadow {
  0%{
    text-shadow: 0px 0px 0px var(--yellow);
  }
}

@keyframes menu-change {
  0%{
    width: 100%;
  }
}

@keyframes main-content-cover {
  0%{
    margin-left: 100vw;
  }
}

@media screen and (orientation: portrait) {
  .float-menu{
    visibility: hidden;
    right: 100%;
    animation: none;
  }

  .main-content{
    width: 100%;
    margin-left: 0;
    animation: none;
  }
}

</style>
